<template>
  <div class="sale">
    <Title></Title>
    <div class="sale_box">
      <div class="inner">
        <div class="sale_tit">
          申请售后
        </div>
        <div class="sale_content">
          <div class="sale_list">
            <div class="sale_name">
              <span>*</span>申请类型：
            </div>
            <div class="sale_input">
              <el-select v-model="typevaule" class="select" placeholder="请选择" @change="typeChange">
                <el-option v-for="items in typeoption" :key="items.id" :label="items.name" :value="items.id">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="sale_list">
            <div class="sale_name">
              <span>*</span>申请原因：
            </div>
            <div class="sale_input">
              <el-select v-model="reasonvaule" class="select" :disabled="reasondata" placeholder="请选择" @change="reasonChange">
                <el-option v-for="items in reasonoption" :key="items.id" :label="items.name" :value="items.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="sale_list">
            <div class="sale_name">
              <span>*</span>申请金额：
            </div>
            <div class="sale_input input1">
                ￥{{fromdata.after_sales_price}}
            </div>
          </div>
          <div class="sale_list">
            <div class="sale_name">
              <span>*</span>问题描述：
            </div>
            <div class="sale_textarea">
              <textarea placeholder="问题描述" v-model="fromdata.after_sales_content" @blur="inputarea" cols="30" rows="10"></textarea>
            </div>
          </div>
          <div class="sale_list">
            <div class="sale_name">
              <span>*</span>图片信息：
            </div>
            <div class="sale_upload">
              <el-upload :action="url" :headers="headers" list-type="picture-card" :limit="5"
                :on-success="uploadSuccess" :on-remove="handleRemove">
                <i class="el-icon-camera"></i>
              </el-upload>
            </div>
          </div>
          <div class="sale_list">
            <div class="sale_name">
              <span>*</span>联系电话：
            </div>
            <div class="sale_input">
              <input class="input" maxlength="11" v-model="fromdata.after_sales_phone" @blur="inputphone" type="text" placeholder="请输入电话号码">
            </div>
          </div>
          <div class="sale_btns" @click="salescommitfn">
            确认提交
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import Title from "../../components/title.vue"
  import {getaftersalesapi,commitaftersaleapi} from "../../api/http.js"
   import { BASE_URL} from "../../api/config.js"
  export default {
    name: 'sale',
    components: {
      Title
    },
    data() {
      return {
        reasondata: true,
        fromdata:{
          order_id:"",//订单id
          after_sales_id:"",////原因的id
          goods_sku_id:"",//sku的id
          after_sales_price:"",//价格
          after_sales_content:"",//问题描述
          after_sales_imgs:[],//图片
          after_sales_phone:""//电话号码
        },
        typeoption: [],//售后类型
        typevaule: "",//售后id
        reasonoption: [],//原因的数组
        reasonvaule: "",//原因的id
        headers:{
          'OPENID':localStorage.getItem('user')
        },
        url:BASE_URL+'/api/user_upload/upload_img'
      }
    },
   async created() {
     this.fromdata.order_id=this.$route.query.order_id
     this.fromdata.goods_sku_id=this.$route.query.goods_sku_id
      const res = await getaftersalesapi(this.$route.query)
      if (res.data.code==200) {
        this.fromdata.after_sales_price=res.data.data.after_sales_price
        this.typeoption = res.data.data.data
      } else{
        this.$message(res.data.msg)
      }
      console.log(res);
    },
    methods: {
     //原因的数据
     async typeChange() {
        console.log(this.typevaule);
        this.fromdata.after_sales_id=''
        this.reasonvaule=''
        this.reasondata = true
        let arr= {
          id:this.typevaule,
          order_id:this.$route.query.order_id,
          goods_sku_id:this.$route.query.goods_sku_id
        }
        const res = await getaftersalesapi(arr)
        if (res.data.code==200) {
          console.log(res.data.data.data);
          this.reasonoption = res.data.data.data
          this.reasondata = false
        } else{
          this.$message(res.data.msg)
        }
      },
      //原因id的选择
      reasonChange() {
        this.fromdata.after_sales_id = this.reasonvaule
      },
      //图片删除
      handleRemove(file, fileList) {
        const filePath = file.response.data.url
        const i = this.fromdata.after_sales_imgs.findIndex(x => x === filePath)
        this.fromdata.after_sales_imgs.splice(i, 1)
      },
      // 图片上传
      uploadSuccess(response, file, fileList) {
        console.log(file, fileList);
        if (response.code == 200) {
         //状态码为200时则上传成功
         this.fromdata.after_sales_imgs.push(response.data.url)
        } else {
          //状态码不是200时上传失败 从
          this.$message("上传失败")
        }
      },
      // 问题描述
      inputarea(){
        var addressreg = /^[^ ]/
        addressreg.test(this.fromdata.after_sales_content) ? this.$message("输入正确") : this.$message("请输入正确的问题描述")
      },
      // 电话号码
      inputphone(){
        var phonereg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])[0-9]{8}$/
        phonereg.test(this.fromdata.after_sales_phone) ? this.$message("手机号输入正确") : this.$message("请输入正确的手机号")
      },
      // 确认提交
     async salescommitfn(){

       var addressreg = /^[^ ]/
       var phonereg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])[0-9]{8}$/
       if(this.fromdata.after_sales_id==""){
         return this.$message("请选择售后类型和原因")
       }
       if(this.fromdata.after_sales_content=="" || !addressreg.test(this.fromdata.after_sales_content)){
           return this.$message("请输入你的问题描述")
        }
        if (this.fromdata.after_sales_phone == "" || !phonereg.test(this.fromdata.after_sales_phone)) {
          return this.$message("输入正确的手机号码")
        }

        this.fromdata.after_sales_imgs =this.fromdata.after_sales_imgs.join(",")
        console.log(this.fromdata);
         const res =await commitaftersaleapi(this.fromdata)
         if (res.data.code==200) {
           this.$message(res.data.msg)
           this.$router.push({
             path:"/layout/meorder"
           })
         } else{
           this.$message(res.data.msg)
         }
      }
    }
  }
</script>

<style lang="less">
  .sale_box {
    width: 100%;

    .inner {
      width: 1300px;
      margin: 0 auto;
      padding: 10px 85px;

      .sale_tit {
        font-weight: 400;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        color: #292929;
        margin-bottom: 20px;
      }

      .sale_content {
        padding: 20px 0;
        width: 100%;
        height: 701px;
        border: 1px solid #CCCDCE;
        .sale_list {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 20px;
          .sale_name {
            height: 40px;
            line-height: 40px;
            width: 100px;
            text-align: center;

            span {
              color: #FF4444;
            }
          }
          .sale_textarea{
              width: 588px;
              height: 113px;
              border: 1px solid #CCCDCE;
              padding: 10px;
              box-sizing: border-box;
              textarea{
                outline: none;
                border: none;
                resize: both;
                width: 100%;
                height: 100%;
              }
          }
          .input1{
            border: 1px solid #CCCDCE;
            display: flex;
            align-items: center;
            color: #CCCDCE;
            text-indent: 10px;
          }
          .sale_input {
            width: 300px;
            height: 40px;

            .input{
              width: 100%;
              height: 100%;
              outline: none;
              border: 1px solid #CCCDCE;
              text-indent: 1em;
            }
            .select{
              width: 100%;
              height: 100%;
            }
          }
        }
        .sale_btns{
          margin:50px auto;
          width: 136px;
          height: 40px;
          background: #FF4444;
          border-radius: 4px;
          font-size: 16px;
          line-height: 40px;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }
  }
</style>
